<template>
  <div class="notice-notifica">
    <div v-show="noticeshow" class="notice-fiexd" @click="toShowDrawer">
      <img src="@/assets/images/bj-icon2.png" alt="">
      <div class="notice-text">
        消息提醒
      </div>
    </div>
    <!-- <el-drawer
      title=""
      custom-class="custom-notice"
      :size="350"
      :visible.sync="drawer"
      :modal="false"
      :withHeader="true"
      :direction="direction"
      :show-close="true"
      :wrapperClosable="false"
      :before-close="handleClose">

    </el-drawer> -->
    <div id="notice-app" class="notice-app" :class="{'notice-app-open': drawer, 'notice-app-close':!drawer}" v-show="drawer">
      <header id="el-drawer__title" class="el-drawer__header">
        <span role="heading" title=""></span>
        <button aria-label="close drawer" type="button" class="el-drawer__close-btn" @click="handleClose"><i class="el-dialog__close el-icon el-icon-close"></i></button>
      </header>
    </div>
  </div>

</template>
<script>
  import { mapActions, mapGetters, mapState } from "vuex";
  export default {
    data() {
      return {
        drawer: false,
        direction: 'rtl',
      };
    },
    computed: {
      ...mapGetters({
        noticeshow: "websocket/noticeshow"
      })
      // ...mapState({
      //   noticeshow: state => state.websocket.noticeshow
      // })
    },
   created() {

   },
    methods: {
      toShowDrawer() {
        this.drawer = true;
      },
      handleClose() {
        this.drawer = false;
      },
    },
    mounted() {

    }
  };
</script>

<style lang="scss">
  .notice-app{
    overflow-x: hidden;
    overflow-y: auto;
    width: 0;
    background-color: #fff;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    z-index: 9999;
    padding-bottom: 30px;
    padding-top: 35px;
    box-sizing: border-box;
    .el-drawer__header{
      margin-bottom: 0;
      padding: 10px 20px 0 20px;
      position: absolute;
      width: 100%;
      box-sizing: border-box;
      top: 0;
      left: 0;
    }
  }
  .notice-app-open{
    animation: move1 0.3s;
    -webkit-animation: move1 0.3s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
  }
  @keyframes move1 {
    from {
      width: 0;
    }
    to {
      width: 350px;
    }
  }
  @keyframes move2 {
    from {
      width: 350px;
    }
    to {
      width: 0;
    }
  }
  .notice-app-close {
    animation: move2 0.3s;
    -webkit-animation: move2 0.3s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
  }
  .notice-fiexd{
    width: 73px;
    height: 73px;
    background: #FFFFFF;
    border: 2px solid #487EEA;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 30px;
    right: 10px;
    cursor: pointer;
    z-index: 9999;
    img{
      width: 30px;
      height: 32px;
    }
    .notice-text{
      margin-top: 7px;
      font-size: 12px;
      color: #487EEA;
    }
  }
  .notice-wrap{
    width: 304px;
    background: #0a1e3d;
    box-shadow: 0px 0px 22px rgba(0, 0, 0, 0.24);
    border-radius: 8px;
    margin: 0 auto;
    margin-top: 15px;
    .notice-header{
      position: relative;
      width: 100%;
      height: 34px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      color: #ffffff;
      background-color: #566eff;
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      img{
        width: 18px;
        height: 18px;
        position: absolute;
        left: 12px;
        top: 8px;
      }
    }
    .notice-content{
      padding: 0 20px 14px 12px;
      p{
        font-size: 14px;
        line-height: 20px;
        margin-top: 8px;
        color: #ffffff;
      }
    }
    .notice-action{
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-top: 10px;
      button{
        width: 53px;
        height: 25px;
        background: #af522f;
        border-radius: 13px;
        text-align: center;
        line-height: 25px;
        font-size: 14px;
        color: #ffffff;
        outline: none;
        border: none;
        cursor: pointer;
        &:nth-child(1) {
          background-color: #5657ff;
          margin-right: 10px;
        }
      }
    }
  }
</style>
